<template>
  <el-menu
    :unique-opened="true"
    text-color="#333333"
    class="el-menu"
    :mode="direction">
    <el-submenu index="1">
      <template slot="title">
        <i class="el-icon-guide"></i>
        <span>新生指南</span>
      </template>
      <el-menu-item index="1-1">
        <i class="el-icon-bell"></i>
        <span>通知公告</span>
      </el-menu-item>
      <el-menu-item index="1-2">
        <i class="el-icon-s-unfold"></i>
        <span>报道流程</span>
      </el-menu-item>
      <el-menu-item index="1-3">
        <i class="el-icon-wind-power"></i>
        <span>到校指引</span>
      </el-menu-item>
      <el-menu-item index="1-4">
        <i class="el-icon-position"></i>
        <span>校内VR全景</span>
      </el-menu-item>
    </el-submenu>
    <el-submenu index="2">
      <template slot="title">
        <i class="el-icon-school"></i>
        <span>学校概况</span>
      </template>
      <el-menu-item index="2-1">
        <i class="el-icon-news"></i>
        <span>校园新闻</span>
      </el-menu-item>
      <el-menu-item index="2-2">
        <i class="el-icon-tickets"></i>
        <span>学校简介</span>
      </el-menu-item>
      <el-menu-item index="2-3">
        <i class="el-icon-tickets"></i>
        <span>学校介绍</span>
      </el-menu-item>
      <el-menu-item index="2-4">
        <i class="el-icon-tickets"></i>
        <span>部门介绍</span>
      </el-menu-item>
      <el-menu-item index="2-5">
        <i class="el-icon-orange"></i>
        <span>校园风光</span>
      </el-menu-item>
    </el-submenu>
    <el-submenu index="3">
      <template slot="title">
        <i class="el-icon-search"></i>
        <span>相关查询</span>
      </template>
      <el-menu-item index="3-1">
        <i class="el-icon-date"></i>
        <span>课表查询</span>
      </el-menu-item>
      <el-menu-item index="3-2">
        <i class="el-icon-c-scale-to-original"></i>
        <span>成绩查询</span>
      </el-menu-item>
    </el-submenu>
    <el-submenu index="4">
      <template slot="title">
        <i class="el-icon-eleme"></i>
        <span>生活服务</span>
      </template>
      <el-menu-item index="4-1">
        <i class="el-icon-shopping-cart-1"></i>
        <span>超市</span>
      </el-menu-item>
      <el-menu-item index="4-2">
        <i class="el-icon-fork-spoon"></i>
        <span>餐饮</span>
      </el-menu-item>
      <el-menu-item index="4-2">
        <i class="el-icon-bank-card"></i>
        <span>银行</span>
      </el-menu-item>
      <el-menu-item index="4-2">
        <i class="el-icon-link"></i>
        <span>药店</span>
      </el-menu-item>
      <el-menu-item index="4-2">
        <i class="el-icon-wind-power"></i>
        <span>公交站</span>
      </el-menu-item>
    </el-submenu>
    <el-menu-item index="5">
      <i class="el-icon-notebook-1"></i>
      <span>校园通讯录</span>
    </el-menu-item>
  </el-menu>
</template>

<script>
export default {
  name: 'Menu',
  props: ['direction'],
  data () {
    return {}
  }
}
</script>

<style lang="stylus" scoped>
  .el-menu {
    margin-top 70px
  }
</style>
